<template>
	<view>
			<view class="user">
				<view class="user_top">
					<image class="user_card_img" src="../../../static/image/usercard.png"></image>
					账号
				</view>
				<view class="user_input">
					<input class="user_name" placeholder="请输入账号" />
				</view>
			</view>
			<view class="user">
				<view class="user_top">
					<image class="user_card_img" src="../../../static/image/pass.png"></image>
					密码
				</view>
				<view class="user_input">
					<input class="user_name" type="password" placeholder="请输入密码" />
				</view>
			</view>
			<view class="login_btn" @click="hadleSurelogin">登录</view>
			<view class="check_box">
				 <view class="radio-container" @click="toggleRadio">
				      <image :src="checked ? '../../static/image/check.png' : '../../static/image/noCheck.png'" class="radio-icon"></image>
				      <view class="radio-label">我已阅读并同意<text style="color: #FA254F;">《用户协议》</text>与<text style="color: #FA254F;">《隐私政策》</text></view>
				    </view>
			</view>
			<view class="other_login">
				<view class="other_top"><u-divider text="第三方登录"></u-divider></view>
				<view class="other_bottom">
					<image class="three_login_img" src="../../../static/image/QQ.png"></image>
					<image class="three_login_img" src="../../../static/image/wechat.png"></image>
					<image class="three_login_img" src="../../../static/image/paliy.png"></image>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				checked:false
			}
		},
		methods:{
			toggleRadio() {
			    this.checked = !this.checked; // 切换选中状态
			},
			hadleSurelogin(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.user{
		width: 100%;
		height: 80px;
		margin-top: $margin-top-20;
		box-sizing: border-box;
		padding-left: 10px;
		.user_top{
			width: 100%;
			height: 30px;
			display: flex;
			line-height: 30px;
			font-size: $font-size-16;
			align-items: center;
			.user_card_img{
				width: 16px;
				height: 16px;
				margin-right: 5px;
				margin-top: 2px;
			}
		}
		.user_input{
			width: 100%;
			height: 45px;
			box-sizing: border-box;
			.user_name{
				width: 95%;
				height: 100%;
				background-color: #FFF4F3;
				border-radius: $radius_30;
				padding-left: 10px;
			}
		}
	}
	.login_btn{
		width: 90%;
		height: 50px;
		margin: 0 auto;
		margin-top: $margin-top-30;
		background: linear-gradient(to right, #FF5A42, #F92350);
		border-radius: $radius_30;
		text-align: center;
		line-height: $line-height-50;
		font-size: $font-size-18;
		color: $white_color;
	}
	.check_box{
		width: 90%;
		height: 30px;
		margin: 0 auto;
		margin-top: 10px;
		display: flex;
		align-items: center;
		.radio-container {
		  display: flex;
		  align-items: center;
		}
		
		.radio-icon {
		  width: 20px;
		  height: 20px;
		}
		
		.radio-label {
			margin-left: 5px;
		  font-size: $font-size-12;
		}
	}
	.other_login{
		width: 90%;
		height:120px;
		margin: 0 auto;
		margin-top:$margin-top-20;
		.other_top{
			width: 100%;
			height: 10px;
		}
		.other_bottom{
			width: 100%;
			height: 90px;
			@include flexAround();
			.three_login_img{
				width: 41px;
				height: 41px;
			}
		}
	}
</style>